<template>
  <div
    class="z-1000 w-64 border-r h-full auto-bg flex-col items-center pt-5 pb-12 bg-#f7f9fc"
    border-r="1px solid normal_border"
  >
    <div
      class="h-40 w-40 auto-bg f-c-c flex-col rounded-4 cursor-pointer"
      border="1px solid light_border"
      un-hover="bg-#f7f7f7"
    >
      <img src="@/assets/logo.svg" class="h-28 w-28" alt="" />
      <div class="relative h-0 w-full mt-2 text-center">
        <div
          style="
            color: rgb(7, 51, 184);
            background: linear-gradient(98.26deg, rgb(216, 226, 255) 0%, rgb(188, 203, 255) 100%);
          "
          class="w-52 ml--6 absolute top-0 text-12 py-2 rounded-2xl whitespace-nowrap text-ellipsis overflow-hidden px-2"
        >
          中益
        </div>
      </div>
    </div>
    <side-menu :active="active" class="cus-scroll-y mt-16 flex-1"></side-menu>

    <div class="h-60 w-full flex items-end justify-center">
      <user-info></user-info>
    </div>
  </div>
</template>
<script setup lang="ts">
import SideMenu from '../../components/side-menu.vue'
import UserInfo from '../../components/user-info.vue'
import { useUserStore } from '@/store'

const store = useUserStore()
defineProps<{ active: string }>()
const open = ref<boolean>(false)

const viewTitle = computed(() => {
  if (store.userInfo.admin) {
    return '管理员'
  }
  if (store.userInfo.viewId) {
    return store.userInfo.view.title
  } else {
    return null
  }
})
</script>
